<template>
  <!-- 头像 -->
  <header>
    <div class="top" @click="goLogin">
      <div class="head" v-if="token">
        <img src="http://10.31.165.26:3000/images/tuzi.png" alt="" />
      </div>
      <span>{{ nickname }}</span>
      <p>个人主页</p>
    </div>
    <!-- 会员中心 商城 -->
    <van-row justify="space-around">
      <van-col span="6">会员中心</van-col>
      <van-col span="6">积分商城</van-col>
      <van-col span="6">积分商城</van-col>
    </van-row>
    <!--  -->
    <div>
      <div class="frequency_outer">
        <p v-for="item in frequency" :key="item" class="frequency">
          {{ item }}
        </p>
      </div>
      <div class="frequency_outer">
        <p v-for="item in list" :key="item" class="frequency collect">
          {{ item }}
        </p>
      </div>
    </div>
    <!--  -->
  </header>
  <!-- 收藏足迹订单 -->
  <main>
    <van-grid>
      <van-grid-item icon="orders-o" text="全部订单" />
      <van-grid-item icon="balance-pay" text="待付款" />
      <van-grid-item icon="logistics" text="未出行" />
      <van-grid-item icon="records" text="待点评" />
    </van-grid>
    <div class="xiangji" @click="goNext">旅拍功能/一件启动/特效美颜</div>
  </main>
  <!-- 我的工具 -->
  <footer>
    <div>
      <h2>我的工具</h2>
      <van-button square type="primary" color="#FF8787" class="button1">我的信息</van-button>
      <van-button square type="primary" color="#65E0FF">方形按钮</van-button>
    </div>
  </footer>
</template>

<script>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    const nickname = ref("请先登录");
    const frequency = ref([1, 26, 8, 666]);
    const list = ref(["收藏", "足迹", "足迹", "积分"]);
    const textList = reactive({
      result: {
        list: [
          { id: 1, text: "全部订单", pic: "orders-o" },
          { id: 2, text: "代付款", pic: "balance-pay" },
          { id: 3, text: "未出行", pic: "logistics" },
          { id: 4, text: "待点评", pic: "records" },
        ],
      },
    });

    const token = ref("");

    token.value = localStorage.getItem("token");
    if (token.value) {
      nickname.value = "一只小兔子";
    }
    const router = useRouter();
    const goNext = () => {
      router.push("/camera");
    };
    const goLogin = () => {
      if (token.value) {
        router.push("/vipcenter");
      } else {
        router.push("/login");
      }
    };
    return { nickname, frequency, list, textList, goNext, goLogin, token };
  },
};
</script>
<style lang="less" scoped>
header {
  width: 375px;
  height: 300px;
  background-image: linear-gradient(#c7e6fe, #fff);
  .top {
    display: flex;
    position: relative;
    padding-top: 50px;
    .head {
      width: 70px;
      height: 72px;
      // background: url(http://10.31.165.26:3000/images/tuzi.png) no-repeat;
      background-size: 100% 100%;
      border-radius: 50%;
      margin: 0 0 0 20px;
      img {
        width: 70px;
        height: 72px;
        border-radius: 50%;
      }
    }
    span {
      font-size: 17px;
      font-weight: 800;
      margin: 10px 0 46px 21.5px;
    }
    p {
      width: 66px;
      height: 26px;
      font-size: 12px;
      line-height: 26px;
      text-align: center;
      border-radius: 13px;
      position: absolute;
      right: 9.5px;
      top: 53px;
      background: #abd9ff;
    }
  }
  .van-col {
    font-size: 17px;
    font-weight: 800;
    width: 107px;
    height: 58px;
    text-align: center;
    line-height: 58px;
    border-radius: 8px;
    background: #fff;
    margin-top: 22px;
    margin-bottom: 31px;
  }

  .frequency_outer {
    display: flex;
    justify-content: space-around;
    width: 100%;
  }
  .frequency {
    width: 34.5px;
    height: 16px;
    text-align: center;
    font-size: 17px;
    font-weight: 800;
  }
  .collect {
    margin-top: 13px;
    font-weight: normal;
  }
}
main {
  margin-top: 20px;
  .van-grid {
    width: 355px;
    margin-left: 10px;
  }
  .xiangji {
    width: 358px;
    height: 120px;
    font-size: 15px;
    text-align: center;
    line-height: 90px;
    margin-left: 9px;
    background: url(http://10.31.165.26:3000/images/meiyan.png) no-repeat;
    background-size: 100% 100%;
    color: #fff;
    border-radius: 7px;
  }
}

footer {
  margin-top: 10px;
  margin-left: 10px;
  width: 355px;
  height: 98px;
  background: #fff;
  padding-top: 10.5px;

  h2 {
    font-size: 17px;
  }
  .van-button {
    width: 162.5px;
    height: 40px;
    border-radius: 8px;
  }
  .button1 {
    margin: 0 10px 0 10px;
  }
}
</style>
